const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: '[name].js'  // 定义一个变量导出
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader", "postcss-loader"]
    }]
  },
  plugins: [  // 所有plugins 都需要配置在 plugins配置项里
    new HtmlWebpackPlugin({
      title: "My App",  // 设置 打包之后的title
      filename: "index.html",  // 打包之后的html名称
      template: "./src/public/index.html"  // 要打包的模板
    }),
    new MiniCssExtractPlugin({ // 配置 提取css的 插件
      filename: '[name].css'  // 生成一个变量css名称
    }),
    // new ESLintPlugin()
  ],
  devServer: {
    // 自动开启浏览器
    open: true,
    // 端口
    port: 8081,
    liveReload: true,//启动自动更新
  }
}